<template>
	<div id="map"></div>
	<template v-for="item in baseMap.control" :key="item">
		<component :is="control[item]" />
	</template>
</template>

<script setup>
import { onMounted } from 'vue'
import mousePosition from './control/mousePosition.vue'
import baseMap from '@/components/mapbox/const.js'
import 'mapbox-gl/dist/mapbox-gl.css'

const control = {
	mousePosition,
}

onMounted(() => {
	window.map.setZoom(10)
	window.map.setCenter([113.264385, 23.12911])
})
</script>

<style scoped>
#map {
	width: 100%;
	height: 100%;
}
</style>
